import { Form, Input, ImageUploader, Button, SafeArea, Toast, TextArea } from "antd-mobile";
import React, { useRef, useState } from "react";
import { PHONE_REG, API, WISH_PIC_VOLUME } from "@/config";
import requewt from "@/utils/requewt";
import callFeedback from "@/components/common/modalFeedback";
import Router from "next/router";

const compName = "address.form";
const klassName = compName.replace(/\./g, '-');

export default function Curtain({data, handler}) {
  const [form] = Form.useForm();
  const [fileList, setFileList] = useState([]);
  const [pitching, setPitching] = useState(false);
  const [visible, setVisible] = useState(undefined);
  const [remain, setRemain] = useState(0);

  let formRef = useRef();

  const compHandler = {
    submit: async (values) => {
      console.log(`values`, values);
      setPitching(true);
      // const values = form.getFieldsValue()

      const options = {
        method: `POST`,
        headers: {"Content-Type": "multipart/form-data"},
        body: values,
      }
      const resp = await requewt(API.prize.address.create, options);
      setTimeout(() => setPitching(false), 300);
      if (resp?.error_code !== 0 || resp?.msg !== `ok`) {
        const c = callFeedback({
          title: <div dangerouslySetInnerHTML={{__html: resp?.msg || `失败`}} />,
          actions: [
            <Button key={`confirm`} onClick={e => {
              c.close();
            }} size="small" className="act-btn act-btn-primary">确定</Button>,
          ],
          closeOnAction: true,
          closeOnMaskClick: false,
        })
      } else {
        Toast.show({content: `成功`, icon: `success`});
        formRef.current?.resetFields()
        handler.filled()
      }
    },
    upload: file => {
      return {
        file,
        url: URL.createObjectURL(file),
      }
    },
    close: () => setVisible(undefined),
    beforeUpload: (file, files) => {
      if (file.size > WISH_PIC_VOLUME) {
        Toast.show(`请选择小于 ${parseInt(WISH_PIC_VOLUME / 1024 / 1024)}M 的图片`)
        return null
      }
      return file
    },
    change: items => {
    }
  }

  if (!data) return null

  return (
    <div className={`cp-${klassName}`}>
      <div className="inner">
        <Form layout='vertical' bordered={false}
              style={{
                "--border-inner": `none`
              }}
              form={form}
              ref={formRef}
              onFinish={compHandler.submit}
              initialValues={{
                name: data?.exchange_nickname,
                phone: data?.exchange_phone,
                exchange_id: data?.exchange_id,
                address: data?.exchange_address,
              }}
              footer={
                <div className="">
                  <div className="inner">
                    <Button className="ope-btn act-btn act-btn-bevel" size={`small`}
                            type='submit'
                            loading={pitching}
                            block shape="rounded"
                    >确认</Button>
                  </div>

                  <SafeArea position='bottom' />
                </div>
              }
        >
          <Form.Item hidden name={`exchange_id`}>
            <Input hidden />
          </Form.Item>

          <Form.Item label='收件人' name={`name`} rules={[{required: true}]}>
            <Input placeholder='请输入' />
          </Form.Item>

          <Form.Item label='联系电话' name={`phone`}
                     rules={[
                       {required: true},
                       {pattern: PHONE_REG, message: `请输入正确的手机号`}
                     ]}
          >
            <Input type="number" placeholder='请输入' />
          </Form.Item>

          <Form.Item label='地址详情' name={`address`} rules={[{required: true}]}>
            <TextArea
              placeholder='请输入详细地址'
              rows={2}

            />
          </Form.Item>

          <div className="info">
            请按实际填写，一旦填写确定不可更改 <br />
            <small>(此地址仅供接收定制冰箱贴奖励)</small>
          </div>

        </Form>

      </div>


    </div>
  )
}